<!-- 评论项模板 -->
<div class="bg-white rounded-xl p-6 comment-shadow transition-all duration-300 hover:shadow-lg" data-id="{{ comment.id }}">
    <div class="flex justify-between items-start mb-3">
        <div class="flex items-center">
            <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary font-bold mr-3">
                {{ comment.author[0].upper() }}
            </div>
            <div>
                <h4 class="font-medium text-gray-800">{{ comment.author }}</h4>
                <p class="text-sm text-neutral">
                    {{ comment.created_at|datetimeformat('YYYY年MM月DD日 HH:mm') }}
                </p>
            </div>
        </div>
        <div class="flex space-x-2">
            <!-- 回复按钮 -->
            <button class="reply-btn text-neutral hover:text-primary p-1.5 rounded-full hover:bg-gray-100 transition-colors"
                    data-comment-id="{{ comment.id }}"
                    data-author-name="{{ comment.author }}"
                    title="回复">
                <i class="fa fa-reply"></i>
            </button>
            <!-- 修改按钮：仅 顶级评论（parent_id为空）+ 作者本人 可见 -->
            {% if current_user and current_user.id == comment.author_id %}
                {% if comment.parent_id == None or comment.parent_id == '' %}
                    <button class="edit-btn text-neutral hover:text-blue-500 p-1.5 rounded-full hover:bg-gray-100 transition-colors"
                            data-comment-id="{{ comment.id }}"
                            title="修改">
                        <i class="fa fa-pencil"></i>
                    </button>
                {% endif %}
            {% endif %}
            <!-- 删除按钮（仅自己可见） -->
            {% if current_user and current_user.id == comment.author_id %}
                <button class="delete-btn text-neutral hover:text-red-500 p-1.5 rounded-full hover:bg-gray-100 transition-colors"
                        data-comment-id="{{ comment.id }}"
                        data-author-id="{{ comment.author_id }}"
                        title="删除">
                    <i class="fa fa-trash-o"></i>
                </button>
            {% endif %}
        </div>
    </div>
    <div class="mb-4">
        <p class="text-gray-800">{{ comment.content|replace('\n', '<br>')|safe }}</p>
    </div>
    <!-- 回复列表 -->
    <div class="replies pl-6 mt-4 space-y-4">
        {% for reply in comments if reply.parent_id == comment.id %}
            {% with comment=reply %}
                {% include "comment_item.html" %}
            {% endwith %}
        {% endfor %}
    </div>
</div>